import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("基本样式定制")

    Dial {
        id: styledDial
        width: 150
        height: 150
        anchors.centerIn: parent
        from: 0
        to: 10
        stepSize: 0.5
        snapMode: Dial.SnapOnRelease

        background: Rectangle {
            implicitWidth: styledDial.width
            implicitHeight: styledDial.height
            color: "transparent"
            border.color: "#21be2b"
            border.width: 4
            radius: width / 2
        }

        handle: Rectangle {
            id: handleItem
            width: 16
            height: 16
            color: styledDial.pressed ? "#17a81a" : "#21be2b"
            radius: width / 2
            antialiasing: true
            // 计算内部半径：背景半径减去边框宽度和手柄半径
            property real innerRadius: (styledDial.background.width / 2) - styledDial.background.border.width - (width / 2)

            transform: [
                // 将手柄移动到初始位置（顶部中点）
                Translate {
                    x: styledDial.background.width / 2 - handleItem.width / 2
                    y: styledDial.background.height / 2 - handleItem.height / 2 - innerRadius
                },
                // 绕背景中心旋转
                Rotation {
                    angle: styledDial.angle
                    origin.x: styledDial.background.width / 2
                    origin.y: styledDial.background.height / 2
                }
            ]
        }
    }
}
